<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
    <link href="css/sound-ready.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">


    <script src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        google.load('search', '1');

        var imageSearch;

        function addPaginationLinks() {

            // To paginate search results, use the cursor function.
            var cursor = imageSearch.cursor;
            var curPage = cursor.currentPageIndex; // check what page the app is on
            var pagesDiv = document.createElement('div');
            for (var i = 0; i < cursor.pages.length; i++) {
                var page = cursor.pages[i];
                if (curPage == i) {

                    // If we are on the current page, then don't make a link.
                    var label = document.createTextNode(' ' + page.label + ' ');
                    pagesDiv.appendChild(label);
                } else {

                    // Create links to other pages using gotoPage() on the searcher.
                    var link = document.createElement('a');
                    link.href = "javascript:imageSearch.gotoPage(" + i + ');';
                    link.innerHTML = page.label;
                    link.style.marginRight = '2px';
                    pagesDiv.appendChild(link);
                }
            }

            var contentDiv = document.getElementById('content');
            contentDiv.appendChild(pagesDiv);
        }

        function searchComplete() {

            // Check that we got results
            if (imageSearch.results && imageSearch.results.length > 0) {

                // Grab our content div, clear it.
                var contentDiv = document.getElementById('content');
                contentDiv.innerHTML = '';

                // Loop through our results, printing them to the page.
                var results = imageSearch.results;
                for (var i = 0; i < results.length; i++) {
                    // For each result write it's title and image to the screen
                    var result = results[i];
//                    var imgContainer = document.createElement('div');
//                    var title = document.createElement('div');

                    // We use titleNoFormatting so that no HTML tags are left in the
                    // title
//                    title.innerHTML = result.titleNoFormatting;
                    var newImg = document.createElement('img');

                    // There is also a result.url property which has the escaped version
                    newImg.src = result.tbUrl;
//                    imgContainer.appendChild(title);
//                    imgContainer.appendChild(newImg);

                    // Put our title + image in the content
                    contentDiv.appendChild(newImg);
                }

                // Now add links to additional pages of search results.
                addPaginationLinks(imageSearch);
            }
        }

        function OnLoad() {

            // Create an Image Search instance.
            imageSearch = new google.search.ImageSearch();

            // Set searchComplete as the callback function when a search is
            // complete.  The imageSearch object will have results in it.
            imageSearch.setSearchCompleteCallback(this, searchComplete, null);

            // Find me a beautiful car.
            imageSearch.execute("Subaru STI");
            imageSearch.execute("table");
            imageSearch.execute("google");

            // Include the required Google branding
//            google.search.Search.getBranding('branding');
        }
        google.setOnLoadCallback(OnLoad);
    </script>

    <style>
        #content {
            text-align: center;
        }

        #content img {
            padding: 30px;
        }

        .help {
            margin: 10px;
        }
    </style>

</head>

<body>

<div class="container">

    <div class="content">

        <div class="content-inner">

            <div id="content">Loading...</div>


            <h1 class="pump-up">Name a band, get a playlist for their next show.<br>
                <strong>Boom, it's that easy.</strong>
            </h1>

            <div class="full-search-bar">
                <ul class="item-stream unstyled search-input-stream">
                    <li class="stream-item stream-header search-input-item">
                        <form>
                            <input class="xlarge artist-search" id="artist_search" name="q" type="text" placeholder="The Black Keys, Bon Iver, Radiohead..." autocomplete="off" value=""/>
                            <button class="btn btn-large btn-inverse" id="artist_submit" type="submit">Check</button>
                        </form>
                    </li>
                </ul>
                <div class="search-status">
                    <img src="/assets/circle_loader.gif" class="search-loader"/>
                </div>
                <blockquote class="help">
                    <p class="text-error">Вы ввели неправильный ответ. Варианты правильных ответов:</p>
                    <small>Someone famous Source Title</small>
                    <small>Someone famous Source Title</small>
                    <small>Someone famous Source Title</small>
                    <small>Someone famous Source Title</small>
                </blockquote>
                <blockquote class="help">
                    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                </blockquote>
            </div>

        </div>

    </div>
    <!--<div class="footer">-->
        <!--<ul>-->
            <!--<li><a href="/about">About</a></li>-->
            <!--<li><a href="/privacy">Privacy</a></li>-->
            <!--<li><a href="/faq">FAQ</a></li>-->
            <!--<li><a href="/contact">Contact</a></li>-->
        <!--</ul>-->
        <!--<p>-->
            <!--© SoundReady LLC. Made with <a target="_blank" href="http://getbootstrap.com">Bootstrap.</a>-->
        <!--</p>-->
    <!--</div>-->
</div>


<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
<script src="assets/js/application.js"></script>


</body>
</html>
